<template>
  <div class="app-container">
    <el-steps :active="active" process-status="wait" align-center finish-status="success">
      <el-step title="填写课程基本信息"/>
      <el-step title="创建课程大纲"/>
      <el-step title="最终发布"/>
    </el-steps>

    <el-form label-width="120px">
      <el-form-item label="课程标题">
        <el-input v-model="courseInfo.title" placeholder="示例：机器学习项目课：从基础到搭建项目视频课程。专业名称注意大小写"></el-input>
      </el-form-item>

      <!-- 所属分类  -->
      <el-form-item label="课程分类">
        <el-select
          v-model="courseInfo.subjectParentId"
          placeholder="一级分类" @change="subjectLevelOneChanged">

          <el-option
            v-for="subject in subjectOneList"
            :key="subject.id"
            :label="subject.title"
            :value="subject.id"/>


        </el-select>

        <el-select v-model="courseInfo.subjectId" placeholder="二级分类">
          <el-option v-for="subject in subjectTwoList"
                     :key="subject.id"
                     :label="subject.title"
                     :value="subject.id">

          </el-option>
        </el-select>
      </el-form-item>

      <!-- 课程讲师  -->
      <!-- 课程讲师 -->
      <el-form-item label="课程讲师">
        <el-select
          v-model="courseInfo.teacherId"
          placeholder="请选择讲师">
          <el-option v-for="teacher in teacherList" :key="teacher.id" :label="teacher.name"
                     :value="teacher.id"></el-option>
        </el-select>
      </el-form-item>


      <el-form-item label="总课时">
        <el-input-number :min="0" v-model="courseInfo.lessonNum" controls-position="right"
                         placeholder="填写课程的总课时数"></el-input-number>
      </el-form-item>

      <!-- 课程简介  -->
      <el-form-item label="课程简介">
        <tinymce :height="300" v-model="courseInfo.description"></tinymce>
      </el-form-item>

      <!-- 课程封面  -->
      <!-- 课程封面-->
      <el-form-item label="课程封面">
        <!--  show-file-list	是否显示已上传文件列表    -->
        <el-upload
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
          :action="'http://localhost:9001/educos/filecos'">
          <img :src="courseInfo.cover" class="avatar-uploader">
        </el-upload>
      </el-form-item>


      <el-form-item label="课程价格">
        <el-input-number :min="0" v-model="courseInfo.price" controls-position="right" placeholder="免费课程请设置为0元"/>

      </el-form-item>

      <el-button :disabled="saveBtnDisabled" style="margin-top: 12px;" type="primary" @click="saveOrUpdate">下一步
      </el-button>
    </el-form>
  </div>
</template>

<script>
import course from "../../../api/edu/course";
import subject from "../../../api/edu/subject";
import Tinymce from '@/components/Tinymce' //引入组件

export default {
  component: {Tinymce},
  data() {
    return {
      saveBtnDisabled: false,
      courseInfo: {
        title: '',
        subjectId: '',//二级分类id
        subjectParentId: '',//一级分类id
        teacherId: '',
        lessonNum: 0,
        description: '',
        cover: '/static/otherHeadPortrait.jpg',
        price: 0
      },
      BASE_API: process.env.BASE_API, // 接口API地址
      teacherList: [],//封装所有的讲师
      subjectOneList: [],//一级分类
      subjectTwoList: [],//二级分类
      active: 1,
      courseId:''
    }
  },
  created() {
    if (this.$route.params && this.$route.params.id) {
      this.courseId = this.$route.path.id
      //调用根据id查询课程的方法
      this.getInfo()
    }

    //初始化所有讲师
    this.getListTeacher()
    //初始化一级分类
    this.getOneSubject()
  },
  methods: {
    //该方法是第二个页面返回上一步，getinfo用于显示之前提交的信息，需要根据id显示内容，显示内容为
    //课程的信息，大部分内容，course就像是文理科，subject就像是语数英之类的
    //课程里面具体科目，一行，需要显示一级二级内容，又要根据一级显示二级内容
    //根据课程的id获取课程的信息，需要获取到课程的id，向后端返回数据
    getInfo() {
      course.getCourseInfoId(this.courseId)
        .then(Response => {
          //后端会根据id查询到课程的信息，
          this.courseInfo = Response.data.courseInfoVo
          //1 查询所有的分类，包含一级和二级
          subject.getSubjectList().then(Response => {
            //2 获取所有一级分类
            this.subjectOneList = Response.data.list
            //3 把所有的一级分类数组进行遍历，
            for (var i = 0; i < this.subjectOneList.length; i++) {
              //获取每个一级分类
              var oneSubject = this.subjectOneList[i]
              //比较当前courseInfo里面一级分类id和所有的一级分类id
              //在上面的Response.data.courseInfoVo会有subjectParentId，这里面需要把
              //Response.data.courseInfoVo的subjectParentId和oneSubject.id对比
              //对比成功说明找到需要显示的一级分类下面的二级分类，显示
              if (this.courseInfo.subjectParentId == oneSubject.id) {
                this.subjectTwoList = oneSubject.children
              }
            }
          })
          //初始化所有讲师
          this.getListTeacher()
        })
    },
    saveOrUpdate() {
      course.addCourseInfo(this.courseInfo)
        .then(response => {
          this.$message({
            type: 'success',
            message: '添加课程信息成功'
          });
          this.$router.push({path: '/course/chapter/' + response.data.courseId})
        })
    },
    //点击某个一级分类，触发change，显示对应二级分类
    subjectLevelOneChanged(value) {
      //value就是一级分类id值
      //遍历所有的分类，包含一级和二级
      for (var i = 0; i < this.subjectOneList.length; i++) {
        //每个一级分类
        var oneSubject = this.subjectOneList[i];
        //判断：所有一级分类id 和 点击一级分类id是否一样
        if (value === oneSubject.id) {
          //从一级分类获取里面所有的二级分类
          this.subjectTwoList = oneSubject.children
          //把二级分类id值清空
          this.courseInfo.subjectId = ''

        }
      }
    },
    getOneSubject() {
      subject.getSubjectList().then(response => {
        this.subjectOneList = response.data.list
      })
    },
    handleAvatarSuccess(res, file) {
      this.courseInfo.cover = res.data.url
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M

    },
    getListTeacher() {
      course.getListTeacher().then(response => {
        this.teacherList = response.data.items
      })
    }
  }
}
</script>
<style scoped>/*scoped是在当前页面处理style*/
.tinymce-container {
  line-height: 29px;
}
</style>
